
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-05 17:15:04
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\view\adminRole\index.tsx
 * jiu
 */
import { useState, useEffect, useRef } from 'react'
import './index.scss'
import { Space, Table, Tag, Tooltip, Modal, Button, Input, Switch, Form, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { useNavigate } from 'react-router-dom'

import Role from "@/comment/role"

function AdminRole() {
    const [form] = Form.useForm();
    let navigate = useNavigate()
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        status: boolean
    }
    let [roleType, setRoleType] = useState<string>('add')

    const columns: ColumnsType<DataType> = [
        {
            title: '角色名称',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '备注',
            dataIndex: 'age',
            // render: (_, item) => (
            //     <>
            //         <Tooltip title={item.age}>
            //             <p className='tableP'>{item.age}</p>
            //         </Tooltip>
            //     </>
            // ),
        },
        {
            title: '创建时间',
            dataIndex: 'address',

        },
        {
            title: '操作',
            key: 'action',
            render: (_, item) => (
                <Space size="middle">
                    <a href='#' onClick={() => { setIsModalOpen(true), setRoleType("edit") }}>编辑</a>
                    <a href='#'>删除</a>
                </Space>
            ),
        },
    ];


    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            status: false,
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            status: true,
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            status: false,
        },

    ];

    const [datas, setDatas] = useState(data)



    //弹框
    const [isModalOpen, setIsModalOpen] = useState(false);


    //取消
    const cancel = () => {
        setIsModalOpen(false);
        form.resetFields();
    }


    const roleRef = useRef(null);

    //成功走得
    const onFinish = (values: any) => {
        console.log('Success:', values);
        //@ts-ignore 复选框数据
        console.log(roleRef?.current?.getData());

        // setIsModalOpen(false);
    };

    //失败走得
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        // setIsModalOpen(false);
    };

    let [formData, setFormData] = useState({ username: "恩我说" })





    return (
        <div className='intention adminUser'>
            <div className='title'>
                <Button type="primary" onClick={() => { setIsModalOpen(true); setRoleType("add") }}>+ 创建管理员角色</Button>
            </div>
            <Table columns={columns} dataSource={datas} />


            {isModalOpen && <Modal title="创建管理员角色" open={isModalOpen} onCancel={() => { cancel() }} keyboard footer={null}>

                <Form
                    name="basic"
                    labelCol={{ span: 12, offset: 10 }}
                    wrapperCol={{ span: 100 }}
                    style={{ maxWidth: 600, marginTop: "20px" }}
                    initialValues={formData}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                    layout='vertical'
                >
                    <div className='flex'>
                        <Form.Item label="角色名" style={{ width: "168px", }} rules={[{ required: true, message: '请输入角色名' }]} name="username">
                            <Input placeholder="不超过10字" maxLength={10} />
                        </Form.Item>
                        <Form.Item label="备注" style={{ width: "320px", marginLeft: "10px" }} name="remark">
                            <Input placeholder="不超过30字" maxLength={30} />
                        </Form.Item>
                    </div>


                    <Form.Item label="权限选择" style={{ width: "100%", marginLeft: "10px" }} >
                        <div className='paddings searchLogBody'>
                            <Role ref={roleRef} type={roleType} />
                        </div>

                    </Form.Item>




                    <Form.Item wrapperCol={{ offset: 8, span: 16 }} >
                        <div style={{ paddingTop: "10px" }}>
                            <Button type="primary" htmlType="submit">
                                确定
                            </Button>
                            <Button htmlType="button" onClick={() => { cancel() }} className='ml_10'>
                                取消
                            </Button>
                        </div>

                    </Form.Item>
                </Form>


            </Modal>}

        </div>
    )
}

export default AdminRole
